<template>
  <el-dialog
    :title="districtName + '-水量趋势图'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="dailyDialog"
  >
    <div class="tableLine">
      <div id="allCharts" style="width: 100%; height: 200px;" />
      <div
        id="twofourCharts"
        style="width: 100%; height: 200px;margin: 50px 0 0;"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      visible: false,
      chartLine: null,
      chartLinetwo: null,
      allDayData: [],
      nightDayData: [],
      districtName: null,
      dataForm: {
        id: "",
        date: ""
      }
    };
  },
  methods: {
    init(date, id) {
      this.dataForm.id = id || 0;
      this.dataForm.date = date;
      this.visible = true;
      this.$nextTick(() => {
        // 请求
        this.$http({
          url: this.$http.adornUrl("/cms/tbFlowMeter/trend"),
          method: "get",
          params: this.$http.adornParams({
            date: this.dataForm.date,
            id: this.dataForm.id
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.allDayData = data.vo.list;
            this.nightDayData = data.vo.nightList;
            this.districtName = data.vo.flowMeterName;
            if (this.chartLine) {
              this.chartLine.resize();
            }
            if (this.chartLinetwo) {
              this.chartLinetwo.resize();
            }
            this.initChartLine();
            this.initChartLinetwo();
          } else {
            this.allDayData = [];
            this.nightDayData = [];
            this.districtName = null;
            if (this.chartLine) {
              this.chartLine.resize();
            }
            if (this.chartLinetwo) {
              this.chartLinetwo.resize();
            }
            this.initChartLine();
            this.initChartLinetwo();
          }
        });
      });
    },
    // 折线图
    initChartLine() {
      let AllDayTime = [];
      let AllDayValue = [];
      if (this.allDayData.length > 0) {
        this.allDayData.forEach(item => {
          AllDayTime.push(item.time);
          AllDayValue.push(item.flowSum);
        });
      }
      var option = {
        title: {
          text: "过去一个月整天水量数据"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [this.districtName]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        /* toolbox: {
          feature: {
            saveAsImage: {}
          }
        },*/
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: AllDayTime
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "整天数据",
            type: "line",
            stack: "累计流量",
            data: AllDayValue
          }
        ]
      };
      this.chartLine = echarts.init(document.getElementById("allCharts"));
      this.chartLine.setOption(option);
      window.addEventListener("resize", () => {
        this.chartLine.resize();
      });
    },
    // 2-4点夜间水量
    initChartLinetwo() {
      let NightDayTime = [];
      let NightDayValue = [];
      if (this.nightDayData.length > 0) {
        this.nightDayData.forEach(item => {
          NightDayTime.push(item.time);
          NightDayValue.push(item.flowSum);
        });
      }
      var option = {
        title: {
          text: "过去一个月夜间2-4点水量数据"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [this.districtName]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: NightDayTime
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "2-4点水量",
            type: "line",
            stack: "累计流量",
            data: NightDayValue
          }
        ]
      };
      this.chartLinetwo = echarts.init(
        document.getElementById("twofourCharts")
      );
      this.chartLinetwo.setOption(option);
      window.addEventListener("resize", () => {
        this.chartLinetwo.resize();
      });
    }
  }
};
</script>
